{% extends 'base.html' %}
{% block title %}{{ recipe.title }} - 今天吃啥呢{% endblock %}

{% block content %}
<div class="container" style="max-width: 720px;">

    <!-- 菜名标题独占一行 -->
    <h2 class="text-break mb-3">{{ recipe.title }}</h2>

    <!-- 操作按钮独占一行，右对齐 -->
    <div class="d-flex justify-content-end mb-4 gap-2 flex-wrap">
        <a href="{% url 'edit_recipe' recipe.id %}" class="btn btn-warning btn-sm">✏️ 编辑菜谱</a>
        <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteRecipeModal">
            删除菜谱
        </button>
    </div>

    {% if recipe.made_count %}
    <p class="text-muted mb-3 fs-6">🍴 已吃过 <strong>{{ recipe.made_count }}</strong> 次</p>
    {% endif %}

    <!-- 下面内容不变... -->

    <div class="mb-4 d-flex flex-wrap gap-2 align-items-center">
        <span class="badge bg-secondary">
            <i class="bi bi-tags-fill me-1"></i> 分类: {{ recipe.category|default:"未分类" }}
        </span>
        <span class="badge bg-warning text-dark" title="评分">
            ⭐ {{ recipe.rating|default:"未评分" }}
        </span>
        {% if recipe.health_index %}
        <span class="badge bg-info text-dark">健康指数: {{ recipe.health_index }}</span>
        {% endif %}
        {% if recipe.category.name == "堂食" and recipe.location %}
        <span class="badge bg-info text-white" title="位置">
            📍 {{ recipe.location }}
        </span>
        {% endif %}
        {% if recipe.category.name == "外卖" and recipe.shop_name %}
        <span class="badge bg-success text-white" title="店铺名">
            🏪 {{ recipe.shop_name }}
        </span>
        {% endif %}
    </div>

    <form method="post" action="{% url 'increase_made_count' recipe.id %}" class="mb-5 text-center">
        {% csrf_token %}
        <button class="btn btn-success btn-lg px-5 rounded-pill shadow-lg" type="submit">
            ✅ 我吃过这道菜
        </button>
    </form>

    {% if recipe.images.all %}
    <div class="mb-4 d-flex flex-wrap gap-3 justify-content-center">
        {% for img in recipe.images.all %}
        <a href="{{ img.image.url }}" target="_blank" class="d-block rounded overflow-hidden"
           style="width: 45vw; max-width: 180px; height: 120px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: transform 0.3s ease;">
            <img src="{{ img.image.url }}" loading="lazy" alt="图片"
                 style="width: 100%; height: 100%; object-fit: cover;"
                 onmouseover="this.style.transform='scale(1.1)';"
                 onmouseout="this.style.transform='scale(1)';">
        </a>
        {% endfor %}
    </div>
    {% endif %}

    <dl class="row mb-5">
        {% if recipe.description %}
        <dt class="col-12 col-sm-3 fw-bold fs-5">简介</dt>
        <dd class="col-12 col-sm-9 fs-6">{{ recipe.description }}</dd>
        {% endif %}
        {% if recipe.difficulty %}
        <dt class="col-12 col-sm-3 fw-bold fs-5">难易度</dt>
        <dd class="col-12 col-sm-9 fs-6">{{ recipe.difficulty }}</dd>
        {% endif %}
        {% if recipe.estimated_minutes %}
        <dt class="col-12 col-sm-3 fw-bold fs-5">预计耗时</dt>
        <dd class="col-12 col-sm-9 fs-6">{{ recipe.estimated_minutes }} 分钟</dd>
        {% endif %}
        {% if recipe.price_tier %}
        <dt class="col-12 col-sm-3 fw-bold fs-5">价格档次</dt>
        <dd class="col-12 col-sm-9 fs-6">{{ recipe.price_tier }}</dd>
        {% endif %}
        {% if recipe.is_takeaway_available %}
        <dt class="col-12 col-sm-3 fw-bold fs-5">可外卖</dt>
        <dd class="col-12 col-sm-9 fs-6">{{ recipe.is_takeaway_available }}</dd>
        {% endif %}

        {% if recipe.ingredients %}
        <dt class="col-12 fw-bold fs-5 mt-4">材料</dt>
        <dd class="col-12">
            <pre class="bg-light p-3 rounded" style="white-space: pre-wrap;">{{ recipe.ingredients }}</pre>
        </dd>
        {% endif %}
        {% if recipe.steps %}
        <dt class="col-12 fw-bold fs-5 mt-4">步骤</dt>
        <dd class="col-12">
            <pre class="bg-light p-3 rounded" style="white-space: pre-wrap;">{{ recipe.steps }}</pre>
        </dd>
        {% endif %}
        {% if recipe.notes %}
        <dt class="col-12 fw-bold fs-5 mt-4 text-warning">注意事项</dt>
        <dd class="col-12">
            <pre class="bg-warning bg-opacity-10 p-3 rounded" style="white-space: pre-wrap;">{{ recipe.notes }}</pre>
        </dd>
        {% endif %}
    </dl>

    {% if recipe.link %}
    <p class="mb-5 text-center">
        <a href="{{ recipe.link }}" target="_blank" class="btn btn-outline-primary px-4" rel="noopener noreferrer">
            🔗 查看教程链接
        </a>
    </p>
    {% endif %}

    {% if recipe.tags.all %}
    <p class="mb-5">
        <strong>标签：</strong>
        {% for tag in recipe.tags.all %}
        <span class="badge rounded-pill bg-info text-dark me-1 mb-1">{{ tag.name }}</span>
        {% endfor %}
    </p>
    {% endif %}

    <!-- 返回首页按钮 -->
    <div class="mb-5 text-center">
        <a href="{% url 'index' %}" class="btn btn-outline-secondary px-4">🏠 返回首页</a>
    </div>

    <!-- 删除确认 Modal -->
    <div class="modal fade" id="deleteRecipeModal" tabindex="-1" aria-labelledby="deleteRecipeModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form method="post" action="{% url 'delete_recipe' recipe.id %}">
                {% csrf_token %}
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteRecipeModalLabel">确认删除菜谱</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                    </div>
                    <div class="modal-body">
                        确认删除菜谱：<strong>{{ recipe.title }}</strong> ？
                    </div>
                    <div class="modal-footer d-flex gap-2">
                        <button type="button" class="btn btn-secondary flex-fill" data-bs-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-danger flex-fill">确认删除</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
{% endblock %}
